<script setup>
import { ref, defineProps, watch, defineEmits, handleError } from "vue"
let dialogVisible = ref(false)
const props = defineProps({
    isDialog: Boolean
})
const emit = defineEmits(['closeDialog'])
watch(() => props.isDialog, (newVal, oldVal) => {
    console.log('newVal ==>', newVal)
    dialogVisible.value = newVal
})

function close() {

    dialogVisible.value = false
    emit('closeDialog', false)
    console.log(' 触发关闭==>', dialogVisible.value)
}





</script>

<template>
    <div class="dialog">
        <el-dialog title="订单详情" v-model="dialogVisible" width="965" @close="close">
            <div class="content">
                <div class="order-info">
                    <div class="info-box">
                        <div class="info-box-line">
                            <div class="info-title">订单编号</div>
                            <div class="info-content">241227UUPRUFGU</div>
                        </div>
                        <div class="info-box-line">
                            <div class="info-title">商品数量</div>
                            <div class="info-content">3</div>
                        </div>
                        <div class="info-box-line">
                            <div class="info-title">采购成本</div>
                            <div class="info-content">Rp 76.77K</div>
                        </div>
                        <div class="info-box-line">
                            <div class="info-title">最终毛利</div>
                            <div class="info-content">Rp 24.01K (21.3%)</div>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="info-box-line">
                            <div class="info-title">买家支付</div>
                            <div class="info-content">Rp 123.8K</div>
                        </div>
                        <div class="info-box-line">
                            <div class="info-title">平台优惠卷</div>
                            <div class="info-content">Rp 3.8K</div>
                        </div>
                        <div class="info-box-line">
                            <div class="info-title">广告费</div>
                            <div class="info-content">Rp 12K</div>
                        </div>

                    </div>
                    <div class="info-box">
                        <div class="info-box-line">
                            <div class="info-title">运费</div>
                            <div class="info-content">Rp 8k</div>
                        </div>
                        <div class="info-box-line">
                            <div class="info-title">店铺优惠卷</div>
                            <div class="info-content">Rp 2K</div>
                        </div>
                        <div class="info-box-line">
                            <div class="info-title">虾皮入账</div>
                            <div class="info-content">99K</div>
                        </div>
                    </div>
                </div>

                <div class="sale-info">
                    <div class="saletable">
                        <el-table :data="tableData" style="width: 901px;">
                            <el-table-column prop="info" label="商品ID" width="130">
                                <template #header>
                                    <div class="table-header"> <span>商品ID</span>
                                        <img src="@/assets/images/ordermangent/help-circle.png">
                                    </div>
                                </template>
                                <template #default="{ row }">
                                    <div style="width: 250px;height: 80px;display: flex;">
                                        <div><img :src="row.info" alt="商品图片" style="width: 80px; height: 80px;"></div>
                                        <div style="margin-left: 16px;">
                                            <div style="color: #111827;font-size: 14px;height: 23px;">智能无线蓝牙耳机 Pro</div>
                                            <div style="color: #6B7280;height: 20px;">规格：黑色 标准版</div>
                                            <div style="color: #6B7280;height: 20px;">数量:1</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="number" label="SKU" width="192.75">
                                <template #header>
                                    <div class="table-header"> <span>SKU</span>
                                        <img src="@/assets/images/ordermangent/help-circle.png">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="数量" width="192.75">
                                <template #header>
                                    <div class="table-header"> <span>数量</span>
                                        <img src="@/assets/images/ordermangent/help-circle.png">
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="销售价格" width="192.75">
                                <template #header>
                                    <div class="table-header"> <span>销售价格</span>
                                        <img src="@/assets/images/ordermangent/help-circle.png">
                                    </div>
                                </template>
                                <template #default="{ row }">
                                    <span style="color: #EF4444;">{{ row.price }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="采购成本" width="192.75">
                                <template #header>
                                    <div class="table-header"> <span>采购成本</span>
                                        <img src="@/assets/images/ordermangent/help-circle.png">
                                    </div>
                                </template>
                                <template #default="{ row }">
                                    <div style="color: #E6A23C; background-color: #FDF6EC;width: 56.02px;display: flex;
                        justify-content: center;">{{ row.type }}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="order-progress">
                    <div class="title"> <span>订单进度</span>
                        <el-button type="success"
                            style="width:80px;height:30px;color: #2BA471;background: #E3F9E9;border:none">
                            一键复制</el-button>
                    </div>
                    <div class="order-progress-content">
                        <div class="item" v-for="(item, index) in 6" :key="index">
                            <div>2023-03-06 13:45</div>
                            <div style="width: 30px;display: flex;flex-direction: column;align-items: center;">
                                <div
                                    style="width: 8px;height: 8px;border-radius: 100px;border: 2px solid #DCDCDC;margin-bottom: 8px;">
                                </div>
                                <div style="width: 2px;height: 56px"><img src="@/assets/images/ordermangent/divider.png"
                                        alt="" style="width: 2px;height: 56px"></div>
                            </div>
                            <div>
                                <div>买家下单成功</div>
                                <div style="font-size: 14px;">SPEPH034892919562</div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.dialog {
    font-family: "阿里妈妈方圆体 Alimama FangYuanTi VF";

    .content {
        width: 965px;
        height: 1248px;

    }

    .order-info {
        width: 901px;
        height: 170px;
        display: flex;
        margin-left: 16px;

        .info-box {
            width: 300.33px;
            height: 100%;


            .info-box-line {
                display: flex;
                align-items: center;
                width: 100%;
                height: 22px;
                margin-bottom: 6px;

                .info-title {
                    width: 109px
                }

                .info-content {
                    color: rgba(0, 0, 0, 0.9);
                }
            }
        }
    }

    .sale-info {
        margin-left: 16px;
        margin-bottom: 32px;

        .saletable {
            .table-header {
                display: flex;
                align-items: center;
                height: 100%;

                img {
                    margin-left: 6px;
                }
            }
        }
    }

    .order-progress {
        width: 901px;
        height: 738px;
        margin-left: 16px;

        .title {
            width: 100%;
            display: flex;
            justify-content: space-between;

            span {
                font-size: 20px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.9);
            }
        }

        .order-progress-content {
            .item {
                display: flex;
                justify-content: center;
                font-family: 思源黑体;
                color: rgba(0, 0, 0, 0.9);
                font-size: 24px;
                margin-bottom: 8px;
            }
        }
    }

}
</style>
<style lang="scss">
.dialog {
    .el-dialog__title {
        font-family: OPPOSans;
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;

    }

    .el-dialog__header {
        margin: 16px 16px 0 16px;
    }

    .content {
        .sale-info {
            .el-table__inner-wrapper {
                border: 1px solid #E7E7E7;
            }

        }
    }
}
</style>